<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<Wheels.Client>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>DC Metro and Bus</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<style type="text/css" media="screen">
	    @import "/../../Content/Mobile/iPhone/iui40/iui.css";
	    @import "/../../Content/Mobile/iPhone/iui40/t/transit/default-theme.css";
	    @import "/../../Content/Mobile/iPhone/iui40/ext-sandbox/masabi/t/default/iui_ext.css";
        @import "/../../Content/Mobile/iPhone/css/ebt_transit.css";
	</style>

    <script type="application/x-javascript" src="/../../Content/Mobile/iPhone/iui40/iui.js"></script>
    <script type="application/x-javascript" src="/../../Content/Mobile/iPhone/iui40/ext-sandbox/masabi/iui_ext.js"></script>
    <script type="application/x-javascript" src="/../../Content/Mobile/iPhone/iui40/ext-sandbox/view/iui-views.js"></script>
	<script type="application/x-javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>
	<script type="application/x-javascript" src="/../../Content/Mobile/iPhone/css/ebt-transit-view.js"></script>
	<script type="text/javascript" content="text/html; charset=iso-8859-1">
	    window.onload = function() {
	        init();
	        mapSetup();
	        setInterval("GetCurrentLocation()", 30000);
	        
	    }

	</script>
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>	
</head>

<body>
	<div class="toolbar" id="topMenu" align="center">
		<h1 id="pageTitle" style="visibility:hidden"></h1>
		<a id="busStops" class="button busButton" href="/Transit/BusStops" title="Show nearest bus stops"><img src='/images/bus2.png' alt="Bus stops"/></a>
		<a id="trainStops" class="button trainButton" href="/Transit/TrainStops" title="Show nearest train stations"><img src='/images/train2.png' alt="Train stops"/></a>
		<a id="map" class="button mapButton" href="javascript://" onclick="javascript:SetSelectedPage('myMap');" title="Goto Map"><img src='/images/Map.png' alt="Map"/></a>
        <a id="trip" class="button tripButton" href="javascript://" onclick="javascript:SetSelectedPage('MyTrip');"title="My Trip dashboard"><img src='/images/Trip.png' alt="Trip"/></a>
        <a id="login" class="button loginButtonButton" href="/User/Login" title="Login" style="display:none"><img src='/images/login.png' alt="Login"/></a>
        <a id="personal" class="button loginButtonButton" href="/User/Registration" title="Personal info" style="display:none"><img src='/images/personal.png' alt="Personal info"/></a>
	</div>
    <div id="infoPane" onclick="javascript:closePane('infoPane');" >
    
<div id="eidpopupWrapper" class="popupWrapper">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td class="popupGBorder" colspan="3" />
        </tr>
        <tr>
            <td class="popupVBorder" nowrap />
            <td id="eidPopupContent" class="popupContent" nowrap>    
            </td>
            <td class="popupVBorder" nowrap />
        </tr>
        <tr>
            <td class="popupGBorder" colspan="3" />
        </tr>
        <tr>
            <td colspan="3">
                <div class="popupArrow" />
            </td>
        </tr>
    </table>
</div>             
                
    </div>
    <div id="errorPane" onclick="javascript:closePane('errorPane');" >
    </div>    
    <div id='myMap' style="width:100%;height:100%" selected='true' ontouchmove="touchHandler(event);" ontouchstart="touchHandler(event);" ontouchend="touchHandler(event);" >
    </div>
    <div id='MyTrip' class="panel">
    </div>
    <div id='BusStops' class="panel" >
    </div>
    <div id="TrainStops" title="Metro Stations" class="panel">
    </div>
    <div id="StopArrivals" title="Arrivals" class="panel">
    </div>
    <div id="RouteInfo" title="Route Info" class="panel">
    </div>
    <div id="LineInfo" title="Line Info" class="panel">
    </div>
    <div id="TrainPredictions" title="Station Prediction" class="panel" >
        <ul class="trainPrediction">
            <li>&nbsp;</li>
            <li>
                <span class="t_destination line_rd">Grosvenor</span>
                <span class="t_departure">5 min</span>
            </li>
             <li>
                <span class="t_destination line_gr">Grosvenor</span>
                <span class="t_departure">5 min</span>
            </li>
            <li>
                <span class="t_destination">No Information</span>
            </li>
            <li>&nbsp;</li>
        </ul>
        <ul class="trainPrediction">
            <li>&nbsp;</li>
            <li>
                <span class="t_destination line_yl">Grosvenor</span>
                <span class="t_departure">5 min</span>
            </li>
             <li>
                <span class="t_destination line_or">Grosvenor</span>
                <span class="t_departure">5 min</span>
            </li>
            <li>
                <span class="t_destination line_bl">Grosvenor</span>
                <span class="t_departure">5 min</span>
            </li>
            <li>
                <span class="t_destination">No Information</span>
            </li>
            <li>&nbsp;</li>
        </ul>
    </div>
</body>
</html>
